<template>
  <div class="pending">
    <div class="tab_show">
      <el-tabs v-model="tabsActive" @tab-click="handleClick">
        <el-tab-pane label="全部" :name="''" />
        <el-tab-pane label="待付款" name="1" />
        <el-tab-pane label="待发货" name="2" />
        <el-tab-pane label="已发货" name="3" />
        <el-tab-pane label="已完成" name="4" />
        <el-tab-pane label="已关闭" name="5" />
      </el-tabs>
      <!-- 搜索 -->
      <div class="formSearch">
        <el-form
          :inline="true"
          :model="query"
        >
          <el-form-item>
            <div>
              <el-input
                v-model="query.search"
                maxlength="20"
                placeholder="请输入内容"
              >
                <template #prepend>
                  <el-select
                    v-model="query.searchType"
                    style="width: 130px"
                    placeholder="请选择"
                  >
                    <el-option label="订单id" value="1" />
                    <el-option label="买家账户" value="2" />
                    <el-option label="收件人姓名" value="3" />
                    <el-option label="收件人手机号" value="4" />
                  <!-- <el-option label="商品ID" value="5" /> -->
                  </el-select>
                </template>
              </el-input>
            </div>
          </el-form-item>
          <!-- <el-form-item label="售后状态">
              <el-select v-model="query.afterState" placeholder="请选择售后状态">
                <el-option label="全部" :value="null" />
                <el-option label="无售后" value="0" />
                <el-option label="售后中" value="1" />
                <el-option label="售后成功" value="2" />
                <el-option label="售后关闭" value="3" />
              </el-select>
            </el-form-item> -->
          <el-form-item label="下单时间">
            <el-date-picker
              v-model="query.dates"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="search">查询</el-button>
            <el-button
              type="success"
              plain
              :loading="loading.export"
              @click="orderDataExport"
            >导出订单</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableBox">
        <el-table
          v-loading="loading.table"
          :data="tableData"
          border
          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
          tooltip-effect="dark"
          style="width: 100%"
          class="dataTable"
        >
          <el-table-column label="订单id" width="220">
            <template #default="scope">{{ scope.row.orderId }}</template>
          </el-table-column>
          <el-table-column prop="price" label="支付金额（元）" width="220" />
          <el-table-column
            prop="number"
            label="商品数量（件）"
            show-overflow-tooltip
          />
          <el-table-column label="订单状态" show-overflow-tooltip>
            <template #default="scope">
              <span v-if="scope.row.state == 1">待付款</span>
              <span v-if="scope.row.state == 2">待发货</span>
              <span v-if="scope.row.state == 3">已发货</span>
              <span v-if="scope.row.state == 4">已完成</span>
              <span v-if="scope.row.state == 5">已关闭</span>
              <span v-if="scope.row.state == 6">待成团</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="customerName"
            label="下单账户"
            show-overflow-tooltip
          />
          <el-table-column
            prop="createTime"
            label="下单时间"
            show-overflow-tooltip
          />
          <el-table-column label="操作" show-overflow-tooltip>
            <template #default="scope">
              <div class="btnList">
                <el-button
                  v-if="scope.row.state === 1"
                  type="primary"
                  link
                  @click="handleChangePrice(scope.row)"
                >改价</el-button>
                <el-button
                  v-if="scope.row.state == 2"
                  type="primary"
                  link
                  @click="view(scope.row)"
                >发货</el-button>
                <el-button
                  v-else
                  type="primary"
                  link
                  @click="view(scope.row)"
                >查看</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination
            :current-page="page.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            background
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <pend-details ref="pendDetailsRef" @refresh="getAll" />
    <ChangePrice ref="changePriceRef" @success="getAll" />
  </div>
</template>

<script setup>
import { defineComponent, onMounted, reactive, ref } from 'vue';

import { orderGetAll, orderExport } from '@/api/order'

import PendDetails from './pendDetails.vue'
import ChangePrice from './components/changePrice.vue'

defineComponent({
  name: 'OrderPage'
})

let loading = reactive({
  table: false,
  export: false,
})

let page = reactive({
  page: 1,
  pageSize: 10,
  total: 0
})
let tabsActive = ref('')
/**
 * @property {string} searchType 搜索类型  1-订单ID 2-买家账户 3-收件人姓名 4-收件人手机号 5-商品ID
 * @property {string} search 搜索字段
 * @property {string} state 订单状态 1-待付款 2-待发货 3-已发货 4-已完成 5-已关闭
 * @property {} afterState 售后状态 0-无售后 1-售后中 2-售后成功 3-售后关闭
 * @property {} dates 下单时间数组
 */
let query = reactive({
  searchType: '1',
  search: '',
  state: '',
  afterState: '',
  dates: [],
})
let tableData = ref([]);
// 初始化查询所有数据
function getAll () {
  loading.table = true
  orderGetAll(Object.assign({}, {
    page: page.page,
    pageSize: page.pageSize
  }, query)).then(res => {
    tableData.value = res.data.list
    page.total = res.data.total
  }).finally(() => {
    loading.table = false
  })
}
function handleCurrentChange (val) {
  page.page = val
  getAll()
}
function handleSizeChange (val) {
  page.pageSize = val
  getAll()
}

function handleClick (tab) {
  page.page = 1
  query.state = tab.props && tab.props.name || ''
  getAll()
}
//  查询
function search () {
  page.page = 1
  getAll()
}
const pendDetailsRef = ref();
function view (row) {
  pendDetailsRef.value.show(row.orderId)
}
const changePriceRef = ref();
function handleChangePrice (row) {
  changePriceRef.value.show(row)
}

// 导出订单
function orderDataExport () {
  loading.export = true
  orderExport(Object.assign({}, page, query)).then(res => {
    if (!res) {
      return
    }
    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
    const fileName = '订单数据明细表.xls'
    if ('download' in document.createElement('a')) {
      // 非IE下载
      const elink = document.createElement('a')
      elink.download = fileName
      elink.href = URL.createObjectURL(blob)
      elink.style.display = 'none'
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href) // 释放URL 对象
      document.body.removeChild(elink)
    } else {
      // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }
  }).finally(() => {
    loading.export = false
  })
}
onMounted(() => {
  getAll()
  handleClick({ name: '' })
})
</script>

<style lang="scss" scoped>
.pending {
  padding: 20px;
  margin-top: 20px;
  background-color: #FFFFFF;
}
// .tab_show {
//   padding-left: 30px;
// }
</style>
